/**
 * @project         Jx
 * @revision        $Id: button.css 302 2009-04-02 18:42:56Z fred.warnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* ============= */
/* BUTTON STYLES */
/* ============= */
/* jxButtons consist of an A, containing a SPAN, which contains an image.
   Buttons can use the sliding door technique with background images to horizontally
   accomodate icons with labels. */

div.jxButtonContainer {
  /* Base setup */
  display: block;
  position: relative;
  float: left;

  margin: 0px;
  padding: 2px;
  border: none;
}

/* normal button */
.jxButton {
  /* Base setup */
  display: block;
  position: relative;
  float: left;

  /* Using background images, the A contains the left side of the background */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 0px 0px 0px 4px; /* makes room for the left of the button bg */
  border: none;
  background-image: url(images/button.png);
  background-position: left -24px;
  background-repeat: no-repeat;
  text-decoration: none;
  outline: none;
}

/* normal button */
a.jxButton {
  /* Base setup */
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
}

ul.jxToolbar .jxButton {
  background-position: left top;
}

span.jxButtonContent {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  font-size: 0px;
  line-height: 0px;

  /* Using background images, the SPAN contains the right side of the background */
  margin: 0px; /* margins don't seem to work properly in IE */
  padding: 4px 4px 4px 0px; /* makes room for the right of the button bg */
  border: none;
  background-image: url(images/button.png);
  background-position: right -24px;
  background-repeat: no-repeat;
}

ul.jxToolbar span.jxButtonContent {
  background-position: right top;
}

/* active button */
ul.jxToolbar .jxButtonActive,
.jxButtonActive {
  background-position: left -72px;
}

ul.jxToolbar .jxButtonActive span.jxButtonContent,
.jxButtonActive span.jxButtonContent {
  background-position: right -72px;
}

/* focus button */
ul.jxToolbar .jxButton:focus,
.jxButton:focus {
  background-position: left -96px;
}

ul.jxToolbar .jxButton:focus span.jxButtonContent,
.jxButton:focus span.jxButtonContent {
  background-position: right -96px;
}

/* focus active button */
ul.jxToolbar .jxButtonActive:focus,
.jxButtonActive:focus {
  background-position: left -144px;
}

ul.jxToolbar .jxButtonActive:focus span.jxButtonContent,
.jxButtonActive:focus span.jxButtonContent {
  background-position: right -144px;
}

/* hover normal and active button */
ul.jxToolbar .jxButton:hover,
ul.jxToolbar .jxButtonActive:hover,
.jxButton:hover,
.jxButtonActive:hover {
  background-position: left -48px;
}

ul.jxToolbar .jxButton:hover span.jxButtonContent,
ul.jxToolbar .jxButtonActive:hover span.jxButtonContent,
.jxButton:hover span.jxButtonContent,
.jxButtonActive:hover span.jxButtonContent {
  background-position: right -48px;
}

/* clicking normal and focused button */
ul.jxToolbar .jxButtonPressed,
ul.jxToolbar .jxButtonPressed:focus,
.jxButtonPressed,
.jxButtonPressed:focus {
  background-position: left -120px;
}

ul.jxToolbar .jxButtonPressed span.jxButtonContent,
ul.jxToolbar .jxButtonPressed:focus span.jxButtonContent,
.jxButtonPressed span.jxButtonContent,
.jxButtonPressed:focus span.jxButtonContent {
  background-position: right -120px;
}

/* disabled buttons */
.jxDisabled .jxButton,
.jxDisabled span.jxButtonContent span {
 cursor: default; 
}

/* hover, focus and pressing disabled button */
ul.jxToolbar .jxDisabled .jxButton:focus,
ul.jxToolbar .jxDisabled .jxButton:active,
ul.jxToolbar .jxDisabled .jxButton:hover,
ul.jxToolbar .jxDisabled .jxButtonPressed {
  background-position: left top;
}

.jxDisabled .jxButton:focus,
.jxDisabled .jxButton:active,
.jxDisabled .jxButton:hover,
.jxDisabled .jxButtonPressed {
  background-position: left -24px;
}

ul.jxToolbar .jxDisabled .jxButton:focus span.jxButtonContent,
ul.jxToolbar .jxDisabled .jxButton:active span.jxButtonContent,
ul.jxToolbar .jxDisabled .jxButton:hover span.jxButtonContent,
ul.jxToolbar .jxDisabled .jxButtonPressed span.jxButtonContent {
  background-position: right top;
}
  
.jxDisabled .jxButton:focus span.jxButtonContent,
.jxDisabled .jxButton:active span.jxButtonContent,
.jxDisabled .jxButton:hover span.jxButtonContent,
.jxDisabled .jxButtonPressed span.jxButtonContent {
  background-position: right -24px;
}

/* hover and focus disabled active button */
ul.jxToolbar .jxDisabled .jxButtonActive:focus,
ul.jxToolbar .jxDisabled .jxButtonActive:active,
ul.jxToolbar .jxDisabled .jxButtonActive:hover,
.jxDisabled .jxButtonActive:focus,
.jxDisabled .jxButtonActive:active,
.jxDisabled .jxButtonActive:hover {
  background-position: left -72px;
}

ul.jxToolbar .jxDisabled .jxButtonActive:focus span.jxButtonContent,
ul.jxToolbar .jxDisabled .jxButtonActive:active span.jxButtonContent,
ul.jxToolbar .jxDisabled .jxButtonActive:hover span.jxButtonContent,
.jxDisabled .jxButtonActive:focus span.jxButtonContent,
.jxDisabled .jxButtonActive:active span.jxButtonContent,
.jxDisabled .jxButtonActive:hover span.jxButtonContent {
  background-position: right -72px;
}

img.jxButtonIcon {
  /* Base setup */
  position: relative;
  float: left;

  width: 16px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
}

span.jxButtonContent span {
  /* Base setup */
  display: block;
  position: relative;
  float: left;
  cursor: pointer;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  height: 16px;
  white-space: nowrap;
}

span.jxButtonContent span.jxButtonLabel {
  margin: 0px;
  padding: 0 4px 0 4px;
  color: #000;
  font-size: 11px;
}

/* ========================== */
/* JX BUTTON EXTENSION STYLES */
/* ========================== */

.jxButtonMenu span.jxButtonContent,
.jxButtonMulti span.jxButtonContent,
.jxButtonFlyout span.jxButtonContent,
.jxButtonCombo span.jxButtonContent,
.jxButtonEditCombo span.jxButtonContent {
  padding-right: 0px;
}

.jxButtonMenu span.jxButtonContent span,
.jxButtonFlyout span.jxButtonContent span,
.jxButtonMulti span.jxButtonContent span,
.jxButtonCombo span.jxButtonContent span,
.jxButtonEditCombo span.jxButtonContent span {
  padding-right: 16px;
  background-image: url(images/emblems.png);
  background-position: right -16px;
  background-repeat: no-repeat;
}

a.jxButtonDisclose {
  position: absolute;
  display: block;
  padding: 4px 0px;
  font-size: 0px;
  line-height: 0px;
  right: 2px;
  top: 2px;
  background-image: url(images/button_multi_disclose.png);
  background-position: right 0px;
  background-repeat: no-repeat;
  outline: none;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
}

a.jxButtonDisclose img {
  width: 16px;
  height: 16px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  background-image: url(images/emblems.png);
  background-position: right -16px;
  background-repeat: no-repeat;
}

a.jxButtonDisclose:focus,
a.jxButtonDisclose:active {
  background-position: right -96px;
}

a.jxButtonDisclose:hover {
  background-position: right -48px;
}

a.jxButtonDisclosePressed {
  background-position: right -120px;
}

.jxDisabled a.jxButtonDisclose,
.jxDisabled a.jxButtonDisclose:focus, 
.jxDisabled a.jxButtonDisclose:active, 
.jxDisabled a.jxButtonDisclose:hover, 
.jxDisabled a.jxButtonDisclosePressed {
  cursor: default; 
  background-position: right 0px;
}

/* note, jxButtonHover is set by Multi button JS */
ul.jxToolbar .jxButtonHover {
  background-position: left -24px !important;
}

ul.jxToolbar .jxButtonHover span.jxButtonContent {
  background-position: right -24px !important;
}


/* Jx Flyout Styles */

.jxFlyout .jxChrome {
  background-image: url(images/flyout_chrome.png);
  padding: 5px 5px 7px 6px;
}

.jxFlyout {
  /* Base setup */
  position: absolute;
  display: block;
  z-index: 100;

  margin: 0px;
  padding: 0px;
}

.jxFlyoutContent {
  position: relative;
  display: block;
  overflow: auto;
  margin: 6px 6px 8px 7px;
  background-color: #fff;
  border: 1px solid #999;
}

/* Jx Combo and Multi Button Styles */

.jxButtonMulti,
.jxButtonMulti span.jxButtonContent {
  background-image: url(images/button_multi.png);
}

.jxButtonEditCombo,
.jxButtonEditCombo span.jxButtonContent {
  background-image: url(images/button_combo.png);
}

/*a.jxButtonEditCombo {
  user-select: text;
  -moz-user-select: text;
  -khtml-user-select: text;
}*/

.jxButtonMulti span.jxButtonContent span {
  padding-right: 21px;
}

.jxButtonEditCombo span.jxButtonContent span {
  font-size: 0px;
}

.jxButtonComboDefault span.jxButtonContent span,
.jxButtonComboDefault input {
  font-style: italic;
  color: #999;
}

.jxButtonEditCombo input {
  float: left;
  line-height: 16px;
  height: 16px;
  padding: 0px 4px;
  margin: 0px;
  border: none;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: transparent;
}